<html>
	<head>
		<meta charset='utf-8'>
		<title>Fortune Teller</title>
		<script type="text/javascript">
			function tellFortune(children,location,partner,job){
				alert("You will be a "+job+" in "+location+", and married with "+partner+" with "+children+" kids.");
			}
		</script>
		<style type="text/css">
			html,body{
    			height: 100%;
			}
			body{
			   	display: table; 
   				margin: 0 auto;
			}
			div.row{
				display: table-row;
			}
			div.cell{
				display: table-cell;
			}
			div.table{
				display: table;
			}
			div.Principal{
				display: table-cell;   
    			vertical-align: middle;
				width: 350px;
				height: 450px;
			}
		</style>
		<body>
			<div class='Principal'>
				<center><h1>Fortune Teller!</h1>
				<form>
					<div class='table'>
						<div class='row'>
							<div class='cell'><label>Number of Children:  </label></div>
							<div class='cell'><input type='text' id='children' value=''></div>
						</div>
						<div class='row'>
							<div class='cell'><label>Partner's Name:  </label></div>
							<div class='cell'><input type='text' id='partner' value=''></div>
						</div>
						<div class='row'>
							<div class='cell'><label>Geographic Location:  </label></div>
							<div class='cell'><input type='text' id='location' value=''></div>
						</div>
						<div class='row'>
							<div class='cell'><label>Job Title:  </label></div>
							<div class='cell'><input type='text' id='job' value=''></div>
						</div>
					</div><br>
					<input type='button' value='Go!' onClick="tellFortune(document.getElementById('children').value,document.getElementById('partner').value,document.getElementById('location').value,document.getElementById('job').value);">
				</form></center>
			</div>
		</body>
	</head>
</html>